<template>
  <div class="goods">
    <div class="wrap">
      <Crumb> </Crumb>
      <img src="../assets/img/banner.4c6b6225.png" width="100%" alt="" />
      <ul class="options">
        <li id="fistlist">
          <strong>排序：</strong>
		  <span v-for="(item,index) in orderArr" 
		  @click="activeitem1(index,item.min,item.max)" :class="orderActive==index?'active':''">{{item.Text}}</span>
        </li>
		
        <li>
          <strong>分类：</strong>
		  <span v-for="(item,index) in classArr" @click="activeitem2(index,item.type)"
		  :class="classActive==index?'active':''">{{item.txt}}</span>
        </li>
      </ul>
	  <List :arr="productsArr"/>
      <!-- <List :arr="reproductsArr"/> -->
    </div>
  </div>
</template>                            
<script>

import Crumb from "../components/Crumb.vue";
import List from "../components/home/List.vue";
import {cartsouAPI} from '@/request/api'
export default {
  data() {
    return {
		did:0,
		min:0,
		type:0,
		max:0,
		keyword:'',
		productsArr:[],
		//reproductsArr:[],用于筛选的数组
		
		
		//排序的数组
		orderArr:[
			{min:0,max:20000,Text:'全部'},
			{min:0,max:0,Text:'我还可以兑换'},
			{min:0,max:2000,Text:'0-2000个'},
			{min:2000,max:4000,Text:'2000-4000个'},
			{min:4000,max:6000,Text:'4000-6000个'},
			{min:6000,max:10000,Text:'6000-10000个'}
		],
		classArr:[
			{type:0,txt:'全部'},
			{type:1,txt:'实体商品'},
			{type:2,txt:'虚拟商品'}
		],
		orderActive:0,
		classActive:0
    };
  },
  methods:{	  
	  async reGooslist(){
		  const res=await cartsouAPI({
		  	did:this.did,
		  	min:this.min,
		  	max:this.max,
		  	keyword:this.$route.query.keyword||this.keyword,
		  	type:this.type
		  })
		 // console.log(res);
		  this.productsArr=res.data;
	  },
	  activeitem1(index,min,max){
		  this.orderActive=index;
		  this.min=min;
		  this.max=max;
		  this.reGooslist();
		  
		  // this.reproductsArr=[];
		  // for(var i=0;i<this.productsArr.length;i++){
			 //  if(this.productsArr[i].coin>=this.orderArr[index].min&&this.productsArr[i].coin<=this.orderArr[index].max){
			 //  			  this.reproductsArr.push({
				// 			  id:this.productsArr[i].id,
				// 		      coverImg:this.productsArr[i].coverImg,
				// 		      coin:this.productsArr[i].coin,
				// 		      name:this.productsArr[i].name
				// 		   });
			 //  }
		  // }
		  //console.log(this.reproductsArr);
	  },
	  activeitem2(index,type){
		  this.classActive=index;
		  this.type=type;
		  this.reGooslist();
		  
	  }
  },
  components: {
    Crumb,
    List,
  },
  async created(){
	  this.reGooslist();
	  
	  
 //  	const res=await cartsouAPI({
	// 	did:this.did,
	// 	min:this.min,
	// 	max:this.max,
	// 	keyword:this.keyword,
	// 	type:this.type
	// })
	// this.productsArr=res.data;
	//this.reproductsArr=res.data;
	console.log(this.productsArr);
  },
  watch:{
	  //监听keyword变化
	  "$route.query.keyword":{
		  handler(){
			  this.$router.go(0);
			  this.reGooslist();
			  
		  }
	  }
  }
  
};
</script>
 
<style lang = "less" scoped>
/* @import "../assets/css/public.less"; */

.goods {
  padding-bottom: 50px;
  background: #efefef;
  padding-top: 20px;
  .options {
    padding-top: 20px;
    padding-bottom: 40px;
    li {
      margin-top: 20px;
      strong {
        color: #000;
        font-weight: bold;
      }
      span{
        margin-right:20px;
        margin-left: 10px;
        cursor: pointer;
        color: #999;
        &.active {
          color: skyblue;
          font-weight: bold;
        }
      }
    }
  }
}
</style>